<template>
  <!-- 头部 -->
  <div id="Hder" class="header open">

    <div class="hdt" style="opacity:0.4;height:30px;">
      <!-- <script language="javascript" src="JavaScript/openlink.js"></script> -->
      <img src="../images/school-head.png" alt="" style="height:26px">
      <a href="https://www.tongji.edu.cn/" target="_blank">同济大学</a>
      <!-- <a href="" target="_blank" onclick="" class="lang">English</a> -->
    </div>

    <div class="hdb">
      <!-- logo部分 -->
      <div class="logo">
        <!-- 网站logo图片地址请在本组件"内容配置-网站logo"处填写 -->
        <img src="../assets/TongjiLogo.png" style="height:40px">
        <!-- width="320px" height="70px" -->
      </div>

      <!-- 开馆时间 -->
      <div class="date-num">
        <!-- 补充时间跳转 -->
        <!-- <a class="date" href="" target="_blank" title="开馆时间" >7:00 ~ 22:00 </a> -->
        <!-- 开馆时间 -->
        <p class="date">7:00 ~ 22:00</p>

        <!-- 补充座位数量 -->
        <!-- 这里座位数量应该链接到座位分布待填入 -->
        <router-link to="/home">
          <div class="label"><img src="../images/chair.png" />&nbsp;&nbsp;-</div>
          <!-- 这里要添加一个座位已用量 -->
          <div class="num">
            <i title="已使用座位量">{{chairsUsed}} </i> / <span title="座位总量">500</span>
          </div>
        </router-link>
      </div>

      <!-- 快捷部分 -->
      <div class="hdr">
        <!-- <a href="../../public/index.html" class="a1 link1" style="" >首页</a> -->
        <!-- 这里要转到图书排行 -->
        <a href="/Siping" class="a1 link2" style="">图书</a>
        <!-- 转到个人主页 -->
        <a href="/personalpage" class="a1 link3" onclick="" style="">个人</a>

        <!-- 搜索框 -->
        <div class="so">
          <div class="btn"></div>
          <div class="inp" style=""></div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="mb-menu"></div> -->

  <el-container>


    <el-aside :width="iscollapse ? '64px' : '200px'" style="background-color:#fff;padding:1px;box-shadow:0 0 30px rgb(51, 85, 97);
    overflow: hidden;position: fixed;z-index: 99;height: 100%;">
      <!-- 侧边栏菜单 -->
      <div class="toggle-button" @click="toggleCollapse" style="color:rgb(51, 85, 97); padding-top: 200px">|||</div>

      <el-menu background-color="white" text-color="rgb(51, 85, 97)" active-text-color="rgb(51, 85, 97)" :router="true"
        :collapse="iscollapse" :collapse-transition="false">
        <el-menu-item index="/forum">
          <el-icon>
            <Management />
          </el-icon>
          <template v-slot:title> <span>论坛中心</span></template>
        </el-menu-item>
        <el-menu-item index="/home">
          <el-icon>
            <Opportunity />
          </el-icon>
          <template v-slot:title> <span>场地预约</span></template>
        </el-menu-item>
        <el-menu-item index="/Siping">
          <el-icon>
            <HelpFilled />
          </el-icon>
          <template v-slot:title> <span>馆藏分布</span></template>
        </el-menu-item>
        <el-menu-item index="/myInf">

          <el-icon>
            <UserFilled />
          </el-icon>
          <template v-slot:title> <span>个人主页</span></template>
        </el-menu-item>
      </el-menu>
      <!-- 导航栏 -->
    </el-aside>

    <el-main class="main-page-pad">
      <!-- 活动页 -->
      <div class="index-flash banner swiper-container-horizontal swiper-container-fade" style="width: 100%">
        <ul class="swiper-wrapper" style="transition-duration: 0ms">
          <li id="div1" class="swiper-slide swiper-slide-prev" style="width:100%;opacity: 1;
          transform: translate3d(0px, 0px, 0px);transition-duration: 0ms;">
            <div class="img pc-show">
              <img src="../assets/lbg.jpg" alt="" style="width: 100%;" />
            </div>
          </li>
        </ul>
        <div class="arrow"></div>

      </div>

      <!-- 搜索栏 -->
      <div class="wp2">
        <ul class="so-list fix" style="display: flex;
            justify-content: center;
            align-items: center;">

          <div class="con" style="">
            <!-- 表单这一部分要post搜索内容到服务器 -->
            <form  @keyup.enter="searchBooks(searchStr)" @submit.native.prevent>
              <!-- title -->
              <div class="tit">
                <span style="color:rgb(38,94,109)">图书搜索</span> 
              </div>
              <!-- 搜索框 -->
              <div class="inp">
                <input class="text" type="text" v-model="searchStr">
                <input class="btn" type="button" @click="searchBooks(searchStr)"/>
              </div>
            </form>
            <!-- 搜索栏底部 -->
            <!-- <div class="tp">
              <a class="a1" href="#" target="_blank">按类型查</a>
              <a class="a1" href="#" target="_blank">按热度查</a>
              <a class="a1" href="#" target="_blank">按评分查</a>
              <a class="a1" href="#" target="_blank">新书通报</a>
            </div> -->
          </div>

        </ul>

      </div>

      <!-- 通知公告 -->
      <div class="main" style="margin-top:20% ">
        <div class="row-a2">
          <div class="bg"></div>
          <div class="wp">
            <!-- 通知 -->
            <div class="col-l">
              <div class="m-tit1">
                <h3 class="tit">通知公告</h3>
                <!-- <a class="more" href="tzgg.htm">更多<em>&gt;</em></a> -->
                <div class="con-r">
                </div>
              </div>
              <ul class="p-list1" style="height: 370px; overflow: hidden">
                <li>
                  <div class="date"><span>{{date[0]}}</span>{{yearMonth[0]}}</div>
                  <h4 class="tit" @click="clickNotice(notices[0].TITLE,notices[0].RELEASE_DATE,notices[0].TEXT)">
                      <span class="tz-label color1">通知</span>{{notices[0].TITLE}}
                  </h4>
                </li>

                <li>
                  <div class="date"><span>{{date[1]}}</span>{{yearMonth[0]}}</div>
                  <h4 class="tit">
                  <h4 class="tit" @click="clickNotice(notices[1].TITLE,notices[1].RELEASE_DATE,notices[1].TEXT)">
                      <span class="tz-label color1">通知</span>{{notices[1].TITLE}}
                  </h4>
                  </h4>
                </li>

                <li>
                  <div class="date"><span>{{date[2]}}</span>{{yearMonth[0]}}</div>
                  <h4 class="tit">
                  <h4 class="tit" @click="clickNotice(notices[2].TITLE,notices[2].RELEASE_DATE,notices[2].TEXT)">
                      <span class="tz-label color1">通知</span>{{notices[2].TITLE}}
                  </h4>
                  </h4>
                </li>

                <li>
                  <div class="date"><span>{{date[3]}}</span>{{yearMonth[0]}}</div>
                  <h4 class="tit">
                  <h4 class="tit" @click="clickNotice(notices[3].TITLE,notices[3].RELEASE_DATE,notices[3].TEXT)">
                      <span class="tz-label color1">通知</span>{{notices[3].TITLE}}
                  </h4>
                  </h4>
                </li>
              </ul>
            </div>
            <!-- 图书top榜单 -->
            <div class="col-c">
              <div class="m-tit1">
                <h3 class="tit">TOP榜单</h3>
                <!-- <a class="more" href="zydt.htm">更多<em>&gt;</em></a> -->
                <div class="con-r"></div>
              </div>
              <ul class="p-list1" style="min-height: 430px; overflow: hidden">
                <li>
                  <div class="date detail-pad"><span class="top-num">1</span>Top</div>
                  <h4 class="tit" @click="toBook(bookname1)">
                    <img :src="book_img1" alt="" style="width: 80px">
                    
                    <div class="introduction">
                      <div>
                        <img src="../images/bookicon.png" alt="">
                        <div class="detail-book">{{bookname1}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/authoricon.png" alt="">
                         <div class="detail-book">{{author1}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/publishericon.png" alt="">
                        <div class="detail-book">{{publisher1}}</div>
                      </div>
                    </div>

                  </h4>
                </li>
                <li>
                  <div class="date detail-pad"><span class="top-num">2</span>Top</div>
                  <h4 class="tit" @click="toBook(bookname2)">
                    <img :src="book_img2" alt="" style="width: 80px">
                    <div class="introduction">
                      <div>
                        <img src="../images/bookicon.png" alt="">
                        <div class="detail-book">{{bookname2}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/authoricon.png" alt="">
                         <div class="detail-book">{{author2}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/publishericon.png" alt="">
                        <div class="detail-book">{{publisher2}}</div>
                      </div>
                    </div>
                  </h4>
                </li>
                <li>
                  <div class="date detail-pad"><span class="top-num">3</span>Top</div>
                  <h4 class="tit" @click="toBook(bookname3)">
                    <img :src="book_img3" alt="" style="width: 80px">
                    <div class="introduction">
                      <div>
                        <img src="../images/bookicon.png" alt="">
                        <div class="detail-book">{{bookname3}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/authoricon.png" alt="">
                         <div class="detail-book">{{author3}}</div>
                      </div>
                      <div style="margin-top:13px">
                        <img src="../images/publishericon.png" alt="">
                        <div class="detail-book">{{publisher3}}</div>
                      </div>
                    </div>
                  </h4>
                </li>
                <li>
                  <div class="date"><span class="top-num-other">Top 4</span></div>
                  <h4 class="tit" @click="toBook(bookname4)">
                    <div class="introduction">
                        <img src="../images/bookicon.png" alt="">
                        <div class="detail-book detail-last-top">{{bookname4}}</div>
                    </div>
                  </h4>
                </li>
                <li>
                  <div class="date"><span class="top-num-other">Top 5</span></div>
                  <h4 class="tit" @click="toBook(bookname5)">
                    <div class="introduction">
                        <img src="../images/bookicon.png" alt="">
                        <div class="detail-book detail-last-top">{{bookname5}}</div>
                    </div>
                  </h4>
                </li>
              </ul>
            </div>
            <!-- 活动日历 -->
            <div class="col-r">
              <div id="main1012297">
                <div class="m-tit1">
                  <h3 class="tit">活动日历</h3>
                  <div class="con-r">
                    <p class="btn-calendar"></p>
                  </div>
                </div>
                <el-calendar v-model="value" />
                <div class="activity-block">
                  <h3 class="title">活动</h3>
                  <router-link class="content" to="/Notice">{{calendarActivity}}</router-link>
                  <div class="con-r">
                    <!--    <a class="btn-order" href="#">订阅+</a> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底栏 -->
      <div class="footer fix" style="position: static;background-color:rgb(38, 94, 109)">
        <div class="wp">
          <div class="ftl">
            <div class="lg">
              <a href="index.htm" onclick="">
                <img src="../assets/TongjiLogo.png" alt="" />
              </a>
            </div>
            <div class="addr">
              <p style="display: inline">
                <span>中国</span>&nbsp;<span>上海</span>&nbsp;<span>嘉定区</span>&nbsp;<span>同济大学图书馆</span>&nbsp;<span>电话：65982734</span>&nbsp;<span>邮箱：tongjilib@tongji.edu.cn</span>
              </p>
            </div>
            <div class="lk">
              <a href="https://www.tongji.edu.cn/" target="_blank">同济大学</a>
            </div>
            <div class="lk2">
              <a href="https://www.lib.tongji.edu.cn/" target="_blank">同济大学图书馆(官方)</a>
            </div>
          </div>
          <div class="ftr">
            <div class="qr">
              <div class="pic" onclick="">
                <img src="../images/code.png" alt="">
              </div>
              <p style="color: #fff">图书馆微信公众号</p>
            </div>
            <div class="c"></div>
            <div class="copy">
              <!-- 版权内容请在本组件"内容配置-版权"处填写 -->
              <p>
                <span>版权所有：</span><a href="https://www.lib.tongji.edu.cn/" target="_blank">同济大学图书馆</a>　版权声明
              </p>
            </div>
          </div>
        </div>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import { reactive, ref } from 'vue'
import axios from 'axios'
// import qs from 'qs'

const value = ref(new Date())
export default {
  name: "HomePage",
  data() {
    return {
      // 是否折叠
      iscollapse: true,
      seachStr: '',
      notices: [
        {
          ID: '',
          RELEASE_DATE: '',
          TEXT: '',
          TITLE: '',
        },
        {
          ID: '',
          RELEASE_DATE: '',
          TEXT: '',
          TITLE: '',
        },
        {
          ID: '',
          RELEASE_DATE: '',
          TEXT: '',
          TITLE: '',
        },
        {
          ID: '',
          RELEASE_DATE: '',
          TEXT: '',
          TITLE: '',
        },
      ],
      calendarActivity:'无',
      date: [],
      yearMonth: [],
      chairsUsed: 0,
      booknames: [],

      //书籍详情
      bookname1: '三体',
      author1:'',
      trans1:'',
      publisher1:'',
      book_img1: '',

      bookname2: '文化苦旅',
      author2:'',
      trans2:'',
      publisher2:'',
      book_img2: '',

      bookname3: '追风筝的人',
      author3:'',
      trans3:'',
      publisher3:'',
      book_img3: '',

      bookname4: '红拂夜奔',
      bookname5: '文化苦旅',
      
    }
  },

  methods: {
    toggleCollapse() {
      this.iscollapse = !this.iscollapse;
      var elmt = document.querySelector(".main-page-pad");
      if (this.iscollapse == false) {
        document.querySelector(".header.open").style.left = "162px";
        elmt.style = "padding-left:200px!important";
        // window.alert(e.className);
      } else {
        document.querySelector(".header.open").style.left = "26px";
        elmt.style = "padding-left:0px!important";
      }
    },
    clickNotice(title, time, text) {
      this.$router.push({ path: "/notice", query: { name: title, time: time, text: text } });
    },
    getBookInfo() {
      // 取到top五本书名
      // axios({
      //   method: 'post',
      //   url: '/api/BookInfo/GETALLBOOKINFO'
      // }).then(async response => {
      //   var len = response.data.length;
      //   for (let i = 0; i < len; i++) {
      //     this.$data.booknames.push(response.data[i].BOOK_NAME);
      //   }
      //   console.log(this.$data.booknames);

      //   let topbooks = [];
      //   const rates = reactive([]);
      //   for (let i = 0; i < len; i++) {
      //     await axios({
      //       method: 'post',
      //       url: '/api/BookInfo/GETBOOKRERATEbyNAME',
      //       params: {
      //         bookname: this.$data.booknames[i],
      //       }
      //     }).then(res => {
      //       rates.push(Number(res.data[0].RATE));

      //       // 最后一个值取完后
      //       if (i == len - 1) {
      //         // 是否与topbooks重复
      //         function isnotSame(k) {
      //           for (let i = 0; i < topbooks.length; i++) {
      //             if (k == topbooks[i])
      //               return false;
      //           }
      //           return true;
      //         }

      //         for (let j = 0; j < 5; j++) {
      //           let maxRate = 0;
      //           for (let k = 1; k < rates.length; k++) {
      //             if (rates[k] > rates[maxRate] && isnotSame(k))
      //               maxRate = k;
      //           }
      //           topbooks.push(maxRate);
      //         }
      //         console.log('topbooks', topbooks);
      //         console.log('rates', rates);
      //         console.log('bookname', this.$data.booknames);


      //         // 第一本
      //         axios({
      //           method: 'post',
      //           url: '/api/BookInfo/GETBOOKINFObyNAME',
      //           params: {
      //             bookname: this.$data.booknames[topbooks[0]],
      //           }
      //         }).then(res => {
      //           this.$data.bookname1 = res.data[0].BOOK_NAME;
      //           this.$data.author1 = res.data[0].BOOK_AUTHOR;
      //           this.$data.trans1 = res.data[0].BOOK_TRANSLATER;
      //           this.$data.publisher1 = res.data[0].BOOK_PUBLISHER;
      //           this.$data.book_img1 = res.data[0].BOOK_IMG;
      //         }).catch(err => {
      //           console.log('@', err);
      //         });

      //         // 第二本
      //         axios({
      //           method: 'post',
      //           url: '/api/BookInfo/GETBOOKINFObyNAME',
      //           params: {
      //             bookname: this.$data.booknames[topbooks[1]],
      //           }
      //         }).then(res => {
      //           this.$data.bookname2 = res.data[0].BOOK_NAME;
      //           this.$data.author2 = res.data[0].BOOK_AUTHOR;
      //           this.$data.trans2 = res.data[0].BOOK_TRANSLATER;
      //           this.$data.publisher2 = res.data[0].BOOK_PUBLISHER;
      //           this.$data.book_img2 = res.data[0].BOOK_IMG;
      //         }).catch(err => {
      //           console.log('@', err);
      //         });

      //         // 第三本
      //         axios({
      //           method: 'post',
      //           url: '/api/BookInfo/GETBOOKINFObyNAME',
      //           params: {
      //             bookname: this.$data.booknames[topbooks[2]],
      //           }
      //         }).then(res => {
      //           this.$data.bookname3 = res.data[0].BOOK_NAME;
      //           this.$data.author3 = res.data[0].BOOK_AUTHOR;
      //           this.$data.trans3 = res.data[0].BOOK_TRANSLATER;
      //           this.$data.publisher3 = res.data[0].BOOK_PUBLISHER;
      //           this.$data.book_img3 = res.data[0].BOOK_IMG;
      //         }).catch(err => {
      //           console.log('@', err);
      //         });
      //         this.$data.bookname4 = this.$data.booknames[topbooks[3]];
      //         this.$data.bookname5 = this.$data.booknames[topbooks[4]];

      //       }

      //     }).catch(err => {
      //       console.log('@', err);
      //     })

      //   }
      // }).catch(error => {
      //   console.log('@', error)
      // });

      axios({
        method: 'get',
        url:'/api/BookInfo/querytopbookinfo'
      }).then(response => {
        var len = response.data.length;
        for (let i = 0; i < len; i++) {
          this.$data.booknames.push(response.data[i].BOOK_NAME);
        }
        console.log('bknames:', this.$data.booknames);
        // 第一本
        axios({
          method: 'post',
          url: '/api/BookInfo/GETBOOKINFObyNAME',
          params: {
            bookname: this.$data.booknames[0],
          }
        }).then(res => {
          this.$data.bookname1 = res.data[0].BOOK_NAME;
          this.$data.author1 = res.data[0].BOOK_AUTHOR;
          this.$data.trans1 = res.data[0].BOOK_TRANSLATER;
          this.$data.publisher1 = res.data[0].BOOK_PUBLISHER;
          this.$data.book_img1 = res.data[0].BOOK_IMG;
        }).catch(err => {
          console.log('@', err);
        });

        // 第二本
        axios({
          method: 'post',
          url: '/api/BookInfo/GETBOOKINFObyNAME',
          params: {
            bookname: this.$data.booknames[1],
          }
        }).then(res => {
          this.$data.bookname2 = res.data[0].BOOK_NAME;
          this.$data.author2 = res.data[0].BOOK_AUTHOR;
          this.$data.trans2 = res.data[0].BOOK_TRANSLATER;
          this.$data.publisher2 = res.data[0].BOOK_PUBLISHER;
          this.$data.book_img2 = res.data[0].BOOK_IMG;
        }).catch(err => {
          console.log('@', err);
        });

        // 第三本
        axios({
          method: 'post',
          url: '/api/BookInfo/GETBOOKINFObyNAME',
          params: {
            bookname: this.$data.booknames[2],
          }
        }).then(res => {
          this.$data.bookname3 = res.data[0].BOOK_NAME;
          this.$data.author3 = res.data[0].BOOK_AUTHOR;
          this.$data.trans3 = res.data[0].BOOK_TRANSLATER;
          this.$data.publisher3 = res.data[0].BOOK_PUBLISHER;
          this.$data.book_img3 = res.data[0].BOOK_IMG;
        }).catch(err => {
          console.log('@', err);
        });
        this.$data.bookname4 = this.$data.booknames[3];
        this.$data.bookname5 = this.$data.booknames[4];


      })
    },
    searchBooks(bookstr) {
      // axios({
      //   method: 'post',
      //   url: '/api/Book/querybookandsearch',
      //   params: {
      //     searchstr: bookstr
      //   }
      // })
      //   .then(res => {
      //     console.log(res)
      //   })
      //   .catch(err => {
      //     console.error(err);
      //   })
      // 跳转到搜索页
      
      this.$router.push({
        path: '/bookCheck',
        query: { keyword: bookstr }
      });


    },
    toBook(bookstr) {
      this.$router.push({
        path: '/book',
        query: { bookName: bookstr }
      })
    }
  },

  mounted() {
    let nts = [];
    axios({
      method: 'get',
      url: '/api/Notice/getnotice',
      // timeout: '500'
    }).then(response => {
      var length = response.data.length;
      // this.$data.notices = response.data;
      for (let i = 0; i < 4; i++) {
        this.$data.notices[i] = response.data[length - i - 1];
        this.$data.date[i] = this.$data.notices[i].RELEASE_DATE.substring(8);
        this.$data.yearMonth[i] = this.$data.notices[i].RELEASE_DATE.substring(0, 4) + '.' +
          this.$data.notices[i].RELEASE_DATE.substring(5, 7);
      }
      // console.log(this.$data.notices)
      // console.log(this.$data.yearMonth);
      var d = new Date();
      var today = d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
      if (today == this.$data.notices[0].RELEASE_DATE)
        this.$data.calendarActivity = this.$data.notices[0].TITLE;
      // console.log(this.$data.notices[4].RELEASE_DATE);
    }).catch(error => {
      console.log('@', error)
    });

    axios({
      method: 'get',
      url: '/api/Reserve/GetNumber',
    }).then(response => {
      this.$data.chairsUsed = response.data;
    }).catch(error => {
      console.log('@', error)
    });

    

    this.getBookInfo();
    // console.log('@', this.$data.book_img);
  }
 
}


</script>

<style>

@import "../StyleSheet/style.css";
@import "../StyleSheet/index.vsb.css";
@import "../StyleSheet/robot.css";
@import "../StyleSheet/slick.css";
@import "../StyleSheet/swiper.css";

/* .calendar-activity {
  height:50px;
  padding:"12px 10px"
} */

/*

.m-tit1 .more em {
    color: #949494;
    font-size: 16px;
    margin-left: 8px
}
*/
.detail-pad{
  margin-right: 5px!important;
}

.top-num {
  background: #4b7e8b;
  color: #f0f2f4;
  border-radius: 20px;
  width: 35px;
}

.top-num-other {
  width: 35px;
  font-size: 13px!important;
}

.wp .col-c .p-list1 .tit img{
  height:80px;
  float:left;
}

.introduction {
  float:left;
}

.wp .col-c .p-list1 .tit .introduction img{
  height:20px;
}

.detail-book {
  width: 145px;
  height: 20px;
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 530;
  color: #000;
  background-color: #dbdfe4;
  border: none;
  border-radius: 45px;
  -webkit-box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
  box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  margin-left: 30px;
  position: relative;
  /* padding-left: 20px; */
  line-height: initial;
  text-align: center;
}

.detail-last-top {
  width: 210px!important;
}

.activity-block {
  overflow: hidden;
  height: 50px;
  margin-right: 20px;
}

.activity-block .title {
  float: left;
  font-size: 16px;
  color: #29293a;
  font-weight: 700;
  margin-right: 10px;
  margin-left: 20px
}

.activity-block .content {
  height: 40px;
  width:72%;
  float: left;
  border-left: 4px solid #265e6d;
  font-size: 14px;
  color: #000000;
  padding-left: 10px;
  margin-right: 10px;
}

.activity-block .content:hover {
  color: #b80308
}

.el-calendar-day {
  height: 40px!important;
}

.main-page-pad {
  padding:0%!important;
  overflow: hidden!important;
  padding-top: 0%!important;
  padding-right: 0%!important;
  padding-bottom: 0%!important;
  padding-left:0px!important;
}

.toggle-button {
  color: white;
  text-align: center;
  line-height: 34px;
  letter-spacing: 0.2em;
  cursor: pointer;

}

.el-aside {
  background-color: rgb(59, 96, 113);
}

.link1 {
  background-image: url(../images/icons05.png)
}

.link2 {
  background-image: url(../images/icons07.png)
}

.link3 {
  background-image: url(../images/icons08.png)
}

.col-l:hover {
  box-shadow: -2px 2px 10px #000;
}

.col-c:hover {
  box-shadow: -2px 2px 10px #000;
}

.col-r:hover {
  box-shadow: -2px 2px 10px #000;
}
</style>